<!doctype html>
<html lang="zh-CN" xmlns:th="http://www.w3.org/1999/xhtml">

<div th:replace="~{admin/component/head::head}"></div>

<body>

<div th:replace="~{admin/component/header::header}"></div>

<div id="app" class="container-fluid">
  <div class="row">

    <div th:replace="~{admin/component/nav::nav}"></div>

    <main class="col-md-9 ms-sm-auto col-lg-10 px-md-4 p-4">

      <div class="table-responsive mt-3 text-center">
        <table class="table table-striped">
          <thead>
          <tr>
            <th scope="col">批次号</th>
            <th scope="col">对账日期</th>
            <th scope="col">支付通道</th>
            <th scope="col">本地订单号</th>
            <th scope="col">订单金额</th>
            <th scope="col">订单状态</th>
            <th scope="col">渠道订单号</th>
            <th scope="col">渠道金额</th>
            <th scope="col">对账状态</th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="billHandle in billHandles" :key="billHandle.id">
            <td>{{billHandle.batchNo}}</td>
            <td>{{billHandle.billDate}}</td>
            <td>{{ getEnumValue(billHandle.channel, ORDER_PAY_CHANNEL) }}</td>
            <td>{{billHandle.payNo}}</td>
            <td>{{billHandle.payAmount}}</td>
            <td>{{ getEnumValue(billHandle.payStatus, ORDER_PAY_STATUS) }}</td>
            <td>{{billHandle.channelPayNo}}</td>
            <td>{{billHandle.channelAmount}}</td>
            <td>{{ getEnumValue(billHandle.billStatus, BILL_STATUS) }}</td>
          </tr>
          </tbody>
        </table>

      </div>

      <!--<div>{{ billHandles }}</div>-->
      <page @change-page='queryBillHandle' :pagesize='pagination.pageSize' :total='pagination.total' :page='pagination.current' />

    </main>
  </div>

</div>

<script>
  // 下面这行声明在一个页面只能有一次，header里已经有了，所以这里去掉
  // const {createApp, ref} = Vue;
  const app = createApp({
    components: {
      page
    },
    setup() {
      const billHandles = ref();
      const pagination = ref({
        current: 1,
        pageSize: 5,
        total: 0
      });
      const ORDER_PAY_STATUS = ref(window.ORDER_PAY_STATUS);
      const ORDER_PAY_CHANNEL = ref(window.ORDER_PAY_CHANNEL);
      const BILL_STATUS = ref(window.BILL_STATUS);

      const queryBillHandle = function (current) {
        if (Tool.isEmpty(current)) {
          current = 1;
        }
        pagination.value.current = current;
        axios.get("/pay/admin/bill-handle/query-list", {
          params: {
            page: current,
            size: pagination.value.pageSize
          }
        }).then((response) => {
          const data = response.data;
          if (data.success) {
            billHandles.value = data.content.list;
            // 设置分页控件的值
            pagination.value.total = Number(data.content.total);
          } else {
            Msg.error(data.message);
          }
        });
      };

      const getEnumValue = (key, obj) => {
        return Tool.getEnumValue(key, obj);
      };

      onMounted(() => {
        queryBillHandle();
      });

      return {
        billHandles,
        pagination,
        queryBillHandle,
        getEnumValue,
        ORDER_PAY_STATUS,
        ORDER_PAY_CHANNEL,
        BILL_STATUS,
      }
    }
  });
  app.mount("#app");
</script>

</body>
</html>
